<template>
<div class="high advanced-search bus-advanced-search advanced-search-2" v-if="show">
  <div v-show="opened"
    class="popover"
    :class="{
      moving: moving,
      dialogVisible: dialogVisible,
      isNewView: isNewView
    }"
  >

    <button class="config-button" @click="
      handleSearchConfig
    ">
      <i class="iconfont icon-peizhi"/>
      <div class="novice-boot-box-wrap" style="position: relative" v-if="!getNoviceKeyStatus.advancedSearchCustomLayout">
        <div class="novice-circle-group " style="position: absolute;top: -35px;right: -15px;cursor: default;">
          <div class="novice-circle4"></div>
          <div class="novice-circle3"></div>
          <div class="novice-circle2"></div>
          <div class="novice-circle1"></div>
        </div>
        <div style="position: absolute;top: -112px;left:-112px ;padding-bottom: 10px;z-index: 100;cursor: default;">
          <novice-boot
            NoviceKey="advancedSearchCustomLayout"
            :NoviceArr="[{title: '', text: $t('public.searchSettingsNovice1')}]"
            @updateGuidanceSuccess="updateGuidanceSuccess"
          ></novice-boot>
        </div>
      </div>
    </button>
    <!-- <div class="form-mark" v-if="dialogVisible"></div> -->

    <el-form :inline="true" label-position="top"  class="high-ranking-search" :rules="computeRules" :model="formStacked.form" ref="ruleForm">
      <div class="search-condition">
        <div class="default-form">
          <el-form-item
            v-for="item in dealedFormItemsLocaled"
            :key="item.name"
            :label="item.label"
            :prop="item.name"
            :class="[
              item.inputType === 'time' || item.inputType === 'radioInput' ? 'add-width' : '',
              item.inputType === 'multi' ? 'multi-label' : '',
              item.inputType === 'rangeInput' ? 'cdr-call': '',
              item.inputType === 'area' ? 'add-width-linkage': '',
              item.name ==='CALL_TIME_LENGTH_END' || item.name === 'QUEUE_TIME_LENGTH_END' || item.name === 'RING_TIME_LENGTH_END'?'whiteFont':'',
              item.inputType === 'no' ? 'minus-width' : '',
              item.name === currentItemName || (item.name && item.name.replace('_END','_BEGIN') === currentItemName) ?'current-item':''
            ]"
          >
            <div class="mark" v-if="dialogVisible" @click="currentItemName=item.name">
              <!-- <div class="sequence">{{index | sequence}}</div> -->
            </div>

            <owner-tree-select ref="ownerTree"
              v-if="item.inputType === 'owner'"
              :businessType="type"
              :name="item.name"
              :owner="owner"
              @owner-change="handleOwnerChange"
              @owner-reset="handleOwnerReset"
            >
            </owner-tree-select>

            <area-linkage v-if="item.inputType==='area'"
              :isMerge="true"
              :isSearch="true"
              :provinceName="item.provinceName"
              :cityName="item.cityName"
              @valueChange="changeData"
            >
            </area-linkage>

            <el-input size="mini" v-if="item.inputType==='input'" @blur="valueFiter(item.name)" v-model.trim="formStacked.form[item.name]" :disabled='item.disabled'></el-input>
            <template v-if="item.inputType==='rangeInput'">
              <el-input size="mini" :placeholder="$t('public.pleaseEnter')" v-model.trim="formStacked.form[item.name]" style="width:90%">
                <template slot="append">{{$t('public.seconds')}}</template>
              </el-input>
              <span class="public-to" v-if="item.name !== 'CALL_TIME_LENGTH_END' && item.name !== 'RING_TIME_LENGTH_END' && item.name !== 'QUEUE_TIME_LENGTH_END'">{{$t('public.to')}}</span>
            </template>

            <el-select size="mini" v-if="item.inputType==='select'"
                        :multiple="item.multiple"
                       collapse-tags
                        @click.stop.native="remoteSearch(item.remoteMethod)"
                        :allow-create="item.allowCreate"
                        :filterable="item.filterable"
                        v-model.trim="formStacked.form[item.name]"
                        :placeholder="$t('public.pleasePick')"
                        @change="changeData(formStacked.form[item.name], item.name)">
              <el-option  v-if="item.inputType==='select'"
                          v-for="item2 in item.data"
                          :label="item2.label"
                          :value="item2.value"
                          :key="item2.value">
              </el-option>
            </el-select>

            <el-date-picker size="mini" v-if="item.inputType==='date'"
                            v-model.trim="formStacked.form[item.name]"
                            type="date"
                            :id="item.name"
                            :editable="false"
                            :placeholder="$t('public.pleasePick')"
                            @focus="datePickerFocus"
                            @blur="datePickerBlur"
                            align="left">
            </el-date-picker>

            <el-date-picker size="mini" v-if="item.inputType==='time'"
                            v-model.trim="formStacked.form[item.name]"
                            type="datetimerange"
                            :id="[item.name + 1, item.name + 2]"
                            :editable="false"
                            :picker-options="pickerOptions2"
                            :placeholder="$t('public.timeRanges')"
                            align="right"
                            @focus="datePickerFocus"
                            @blur="datePickerBlur"
                            style="width:400px">
            </el-date-picker>

            <div v-if="item.inputType==='checkbox'">
              <el-checkbox-group  v-model.trim="formStacked.form[item.name]">
                <el-checkbox v-if="item.inputType==='checkbox'"
                              v-for="(item2,index) in item.data"
                              :label="item2.value"
                              :key="index">
                  {{item2.label}}
                </el-checkbox>
              </el-checkbox-group>
            </div>

            <div v-if="item.inputType === 'radioInput'">
              <el-radio-group v-model.trim="formStacked.form[item.radioName]">
                <el-radio size="mini" :label="`lt__${$t('webchat.lessThan')}`">{{$t('webchat.lessThan')}}</el-radio>
                <el-radio size="mini" :label="`gt__${$t('webchat.moreThan')}`">{{$t('webchat.moreThan')}}</el-radio>
                <el-radio size="mini" :label="`eq__${$t('webchat.equal')}`">{{$t('webchat.equal')}}</el-radio>
              </el-radio-group>
              <el-input size="mini" class="radioInputwidth" v-model.trim="formStacked.form[item.inputName]"></el-input>
            </div>

            <div v-if="item.inputType==='radio'">
              <el-radio-group  v-model.trim="formStacked.form[item.name]">
                <el-radio size="mini" v-if="item.inputType==='radio'"
                          v-for="(item2,index) in item.data"
                          :label="item2.value"
                          :key="index"
                          :class="item2.class?item2.class:''">{{item2.label}}
                </el-radio>
              </el-radio-group>
            </div>

            <i v-if="item.inputType==='no'"></i>
            <label-select v-if="item.inputType === 'multi'" :filterable="item.filterable ? true : false" @labelSelect="changeData" :stringFlag="true" :resetSelect = 'resetSelect' :isClear="isClear"></label-select>
          </el-form-item>
          <!-- <el-form-item  v-show="processMemberItem.name === 'processMember'" :label="processMemberItem.label" :prop="processMemberItem.name">
              <el-select size="mini"
                        :multiple="processMemberItem.multiple"
                        @click.stop.native="remoteSearch(processMemberItem.remoteMethod)"
                        :allow-create="processMemberItem.allowCreate"
                        :filterable="processMemberItem.filterable"
                        v-model.trim="formStacked.form[processMemberItem.name]"
                        :placeholder="$t('public.pleasePick')"
                        @change="changeData(formStacked.form[processMemberItem.name], processMemberItem.name)">
              <el-option
                          v-for="(item2,index) in processMemberItem.data"
                          :label="item2.label"
                          :value="item2.value"
                          :key="item2.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item  v-show="followedAgentsItem.name === 'followedAgents'" :label="followedAgentsItem.label" :prop="followedAgentsItem.name">
            <el-select size="mini"
                       :multiple="followedAgentsItem.multiple"
                       @click.stop.native="remoteSearch(followedAgentsItem.remoteMethod)"
                       :allow-create="followedAgentsItem.allowCreate"
                       :filterable="followedAgentsItem.filterable"
                       v-model.trim="formStacked.form[followedAgentsItem.name]"
                       :placeholder="$t('public.pleasePick')"
                       @change="changeData(formStacked.form[followedAgentsItem.name], followedAgentsItem.name)">
              <el-option
                v-for="(item2,index) in followedAgentsItem.data"
                :label="item2.label"
                :value="item2.value"
                :key="index">
              </el-option>
            </el-select>
          </el-form-item> -->
        </div>
        <div class="dotted" v-if="formStacked.advSearchOptions.custom &&formStacked.advSearchOptions.custom.length>0"></div>
        <div class="custom-form" v-if="formStacked.advSearchOptions.custom">
          <el-form-item v-for="(item,index) in formStacked.advSearchOptions.custom" :label="item.label"
                        :key="index"
                        :class="[item.inputType == 'textarea' ? 'add-width' : '', item.inputType==='no' ? 'minus-width' : '', item.inputType==='checkbox' || item.inputType ==='radio' ? 'all-width' : '']">
            <el-input size="mini" v-if="item.inputType==='input'" v-model.trim="formStacked.form.custom[item.name]"></el-input>

            <el-select size="mini"
                       filterable
                       v-if="item.inputType==='select'" v-model.trim="formStacked.form.custom[item.name]" :placeholder="$t('public.pleasePick')" @change="changeData(formStacked.form.custom[item.name], item.name, 'true', item.cascadeIndex)">
              <el-option v-if="item.inputType==='select'"
                          v-for="(item2,index) in item.data"
                          :label="item2.label"
                          :value="item2.value"
                          :key="index">
              </el-option>
            </el-select>
            <cascader
            v-if="item.inputType==='cascader'"
            :optionsId="item.data.dicId"
            :initCascaderValue="formStacked.form.custom[item.name]"
            :formId="item.name"
            :isSearch="true"
            @change="handleCascader">
            </cascader>
            <el-date-picker size="mini" v-if="item.inputType==='date' || item.inputType==='datetime'"
                            v-model.trim="formStacked.form.custom[item.name]"
                            :type="item.inputType"
                            :editable="false"
                            :id="item.name"
                            :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :placeholder="$t('public.pleasePick')"
                            @focus="datePickerFocus"
                            @blur="datePickerBlur"
                            align="right">
            </el-date-picker>

            <!--<el-date-picker size="mini" v-if="item.inputType==='time'"-->
                            <!--v-model.trim="formStacked.form.custom[item.name]"-->
                            <!--type="datetimerange"-->
                            <!--:editable="false"-->
                            <!--:picker-options="pickerOptions2"-->
                            <!--:placeholder="$t('public.timeRanges')"-->
                            <!--align="right"-->
                            <!--style="width:400px">-->
            <!--</el-date-picker>-->
            <el-time-picker size="mini" v-if="item.inputType === 'time'"
                            v-model.trim="formStacked.form.custom[item.name]"
                            :editable="false"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :placeholder="$t('public.pleasePick')"
                            @focus="datePickerFocus"
                            @blur="datePickerBlur"
                            >
            </el-time-picker>

            <div v-if="item.inputType==='checkbox'">
              <el-checkbox-group  v-model.trim="formStacked.form.custom[item.name]">
                <el-checkbox v-if="item.inputType==='checkbox'"
                              v-for="(item2,index) in item.data"
                              :label="item2.value"
                              :key="index">
                  {{item2.label}}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div v-if="item.inputType==='radio'">
              <el-radio-group  v-model.trim="formStacked.form.custom[item.name]">
                <el-radio size="mini" v-if="item.inputType==='radio'"
                          v-for="(item2,index) in item.data"
                          :label="item2.value"
                          :key="index">
                  {{item2.label}}
                </el-radio>
              </el-radio-group>
            </div>
            <el-input size="mini" type="textarea" v-if="item.inputType==='textarea'" v-model="formStacked.form.custom[item.name]"></el-input>
            <i v-if="item.inputType==='no'"></i>

          </el-form-item>

        </div>
        <div class="solid" v-if="formStacked.advSearchOptions.custom &&formStacked.advSearchOptions.custom.length>0"></div>
      </div>
      <el-form-item class="all-width btn-group footer-btn-group" style="z-index: 0">
        <el-button  class="primary_btn rest-btn" :disabled="dialogVisible" @click="resetForm">{{$t("public.reset")}}</el-button>
        <el-button type="primary" :disabled="dialogVisible" class="primary_btn" @click="submitForm('ruleForm')">{{$t("public.search")}}</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div @click.stop="toggle" class="toggle-btn">
    <el-tooltip class="item" effect="dark" :content="$t('public.advSearch')" placement="bottom">
      <i class="iconfont icon-gaojisousuo"></i>
    </el-tooltip>
  </div>
  <AdvancedSearchConfigDialog
    ref="AdvancedSearchConfigDialog"
    :dialogVisible.sync="dialogVisible"
    :currentItemName.sync="currentItemName"
    :moving.sync="moving"
    :formItems="formItemsLocaled"
    :activeName="activeName"
    :isNewView="isNewView"
    :formItemsConfig="formItemsConfig"
    @confirmNewItemsConfig="$emit('confirmNewItemsConfig', $event)"
    @editingFormItemsConfigChange="editingFormItemsConfigChange"
  />
</div>
</template>
<script>
  import {checkform} from '@/utils/validate'
  import AreaLinkage from '../../../ui-modules/area-linkage/AreaLinkage.vue'
  import OwnerTreeSelect from '../../agent-tree/OwnerTreeSelect.vue'
  import Cascader from '../../cache/Cascader'
  import LabelSelect from '../../phone-bar/LabelSelect.vue'
  import { deepClone, phoneFilterChats } from '@/utils/m7Utils.js'
  import AdvancedSearchConfigDialog from './AdvancedSearchConfigDialog.vue'
  import noviceBoot from '@/components/public-modules/novice-boot/index.vue'

  export default {
    name: 'AdvancedSearch',
    /**
     * [props 该组件所需要的参数]
     * @type {
     *   type        业务类型
     *   typeType    业务tab
     * }
     */
    props: {
      type: String,
      adv: Object,
      activeName: String,
      isClear: Boolean,
      isNewView: Boolean,
      formItemsConfig: {
        type: Object,
        default () {
          return null
        }
      }
    },
    data () {
      return {
        show: false,
        owner2Item1: {},
        owner2Item2: {},
        processMemberItem: {},
        followedAgentsItem: {},
        searchTypeItem: {},
        pickerOptions2: {
          shortcuts: [{
            text: this.$t('sms.thisOneWeek'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisOneMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisThreeMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: this.$t('webchat.oneYear'),
            onClick (picker) {
              const end = new Date()
              const start = new Date(end.getFullYear() + '-01-01 00:00:00')
              picker.$emit('pick', [start, end])
              window._hmt && window._hmt.push(['_trackEvent', '其他统计', '工单查询-今年'])
            }
          },
          {
            text: this.$t('webchat.lastYear'),
            onClick (picker) {
              let year = new Date().getFullYear() - 1
              const start = new Date(year + '-01-01 00:00:00')
              const end = new Date(year + '-12-31 23:59:59')
              picker.$emit('pick', [start, end])
              window._hmt && window._hmt.push(['_trackEvent', '其他统计', '工单查询-去年'])
            }
          }
          ]
        },
        pickerOptions: {
          shortcuts: [
            {
              text: this.$t('webchat.today'),
              onClick (picker) {
                picker.$emit('pick', new Date())
              }
            },
            {
              text: this.$t('webchat.yesterday'),
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              }
            }
          ]
        },
        resetSelect: false,
        opened: false,
        emitData: {},
        editingFormItemsConfig: null,
        currentItemName: '',
        dialogVisible: false,
        moving: false,
        getNoviceKeyStatus: {},
        dateFocus: false
      }
    },
    watch: {
      opened (opened) {
        if (!opened) {
          this.$refs.AdvancedSearchConfigDialog.close()
        }
      },
      adv () {
        this.$nextTick(() => {
          this.$refs.ruleForm && this.$refs.ruleForm.clearValidate()
        })
      }
    },
    components: {
      AreaLinkage,
      OwnerTreeSelect,
      Cascader,
      LabelSelect,
      AdvancedSearchConfigDialog,
      noviceBoot
    },
    methods: {
      editingFormItemsConfigChange(result){
        // console.log(result)
        for(var key in result){
          if(key=='customField'){
            result['textFieldContent'].order=result[key].order
          }
        }
        this.editingFormItemsConfig= result
      },
      handleSearchConfig () {
        this.resetForm()
        this.$refs.AdvancedSearchConfigDialog.open()
        window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-高级搜索布局配置'])
      },
      valueFiter (key) {
        if (key !== 'phone') return
        this.formStacked.form.phone = phoneFilterChats(this.formStacked.form.phone)
      },
      submitForm (formName) {
        let self = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let form = self.formStacked.form
            if (form) {
              if (form.processMember === null || form.processMember === '') {
                self.$emit('ifRemark', false)
              } else {
                self.$emit('ifRemark', true)
              }
              if (parseInt(form.CALL_TIME_LENGTH_BEGIN) >= parseInt(form.CALL_TIME_LENGTH_END)) {
                this.$message.error(this.$t('call.callTimeError'))
                return
              } else if (parseInt(form.QUEUE_TIME_LENGTH_BEGIN) >= parseInt(form.QUEUE_TIME_LENGTH_END)) {
                this.$message.error(this.$t('call.queueTimeError'))
                return
              }
            }
            self.$emit('advSearch', false, 1, self.emitData)
            document.getElementsByTagName('body')[0].click()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm () {
        this.resetSelect = true
        this.$emit('resetForm')
        if (this.$refs.ownerTree && this.$refs.ownerTree.length) {
          this.$refs.ownerTree[0].$emit('resetValue')
        }
      },
      changeData (value, key, custom, cascadeIndex) {
        let emitData = {selectName: key, selectValue: value}
        if (key === 'multiCallLabel') {
          this.resetSelect = false
        }
        if (custom) {
          emitData.custom = true
          emitData.cascadeIndex = cascadeIndex
        }
        this.emitData = emitData
        this.$emit('selectChange', emitData)
      },
      remoteSearch (methodName) {
        if (methodName) {
          this.$emit(methodName)
        }
      },
      handleCascader (data) {
        let emitData = { selectName: 'cascader', selectValue: data.val, name: data.id, custom: true }
        this.$emit('selectChange', emitData)
      },
      handleOwnerChange (obj) {
        let emitData = { selectName: obj.type, selectValue: `${obj._id}__${obj.displayName || obj.label}`, name: obj.name }
        this.$emit('selectChange', emitData)
      },
      handleOwnerReset (name) {
        let emitData = { selectName: 'ownercom', selectValue: '' }
        if (name) {
          emitData.name = name
        }
        this.$emit('selectChange', emitData)
      },
      toggle () {
        this.opened = !this.opened
        if (this.opened && this.$refs.ownerTree) {
          // 高级搜索打开时给ownerTree组件赋值，解决工单tab切换，后打开高级搜索不回显
          this.$refs.ownerTree.map(tree => {
            if (tree.name === 'createUser') {
              let key = this.formStacked.form.createUser ||
                this.formStacked.form.ownercomCreateUser ||
                this.formStacked.form.ownerdepCreateUser
              if (key) {
                key = key.split('__')[0]
              }
              tree.resetValue(key)
            }else if (tree.name === 'processMember') {
              let key = this.formStacked.form.processMember ||
                this.formStacked.form.ownercomProcessMember ||
                this.formStacked.form.ownerdepProcessMember
              if (key) {
                key = key.split('__')[0]
              }
              tree.resetValue(key)
            } else if (tree.name === 'master') {
              let key = this.formStacked.form.master ||
                this.formStacked.form.ownercom ||
                this.formStacked.form.ownerdep
              if (key) {
                key = key.split('__')[0]
              }
              tree.resetValue(key)
            }
          })
        }
      },
      listenerFun (e) {
        if (!this.$el.contains(e.target) && !this.dateFocus) {
          this.opened = false
        }
      },
      updateGuidanceSuccess () {
        let guidance = this.$getCache('guidance')
        this.getNoviceKeyStatus = guidance || {'advancedSearchCustomLayout': true} // 服务不对，或者是没有这个对象时，默认不显示。webchatSessionLocking为气泡的key
      },
      datePickerFocus () {
        // 解决点击日历失去焦点 高级搜索消失bug
        this.dateFocus = true
      },
      datePickerBlur () {
        this.dateFocus = false
      }
    },
    computed: {
      formStacked () {
        // 若高级搜索出现关于座席组件 单独提取 单独渲染
        // 解决之前循环中 v-if 座席数据较大是渲染过慢 页面假死的问题
        // this.isOwnerItem = ''
        // this.processMemberItem = {}
        // this.followedAgentsItem = {}
        // this.searchTypeItem = {}
        // let ownerArray = []
        // ownerArray = this.adv.advSearchOptions.localed.filter((val) => {
        //   // 提取参与座席select
        //   if (val.name === 'processMember') {
        //     this.processMemberItem = val
        //   }
        //   if (val.name === 'followedAgents') {
        //     this.followedAgentsItem = val
        //   }
        //   if (val.name === 'searchType') {
        //     this.searchTypeItem = val
        //   }
        //   return val.inputType === 'owner'
        // })
        // // 提取 归属组件
        // this.owner2Item1 = ownerArray[0] || {}
        // this.owner2Item2 = ownerArray[1] || {}
        return this.adv
      },
      computeRules () {
        let validateMoblie = (rule, value, callback) => {
          if (value !== '') {
            let match = checkform(value, 'Mobile')
            if (match) {
              callback(new Error(this.$t(match)))
            } else {
              callback()
            }
          } else {
            callback()
          }
        }
        let validateEmail = (rule, value, callback) => {
          if (value !== '') {
            let match = checkform(value, 'Email')
            if (match) {
              callback(new Error(this.$t(match)))
            } else {
              callback()
            }
          } else {
            callback()
          }
        }
        let validateNum = (rule, value, callback) => {
          if (value !== '') {
            let match = checkform(value, 'Number3')
            if (match) {
              callback(new Error(this.$t(match)))
            } else {
              callback()
            }
          } else {
            callback()
          }
        }
        let createTime = (rule, value, callback) => {
          if (this.formStacked.form.number) {
            callback()
          } else if (!value) {
            callback(new Error(this.$t('business.creatTimeRequired')))
          } else {
            callback()
          }
        }
        let rules = {}
        let localItem = this.formStacked.advSearchOptions.localed
        if (localItem) {
          localItem.forEach((item) => {
            if (item.validateType === 'Number3') {
              rules[item.name] = [{validator: validateNum, trigger: 'blur'}]
            } else if (item.validateType === 'Mobile') {
              rules[item.name] = [{validator: validateMoblie, trigger: 'blur'}]
            } else if (item.validateType === 'Email') {
              rules[item.name] = [{validator: validateEmail, trigger: 'blur'}]
            } else if (item.name === 'createTime' && this.activeName === 'business_all') {
              rules[item.name] = [{validator: createTime, trigger: 'blur'}]
            }
          })
        }
        return rules
      },
      owner () {
        let form = deepClone(this.formStacked.form)
        let ownercom = form.ownercom ? form.ownercom : ''
        let owner = form.owner ? form.owner : ''
        let ownerdep = form.ownerdep ? form.ownerdep : ''

        // 工单特有的
        let ownercomCreateUser = form.ownercomCreateUser ? form.ownercomCreateUser : ''
        let createUser = form.createUser ? form.createUser : ''
        let ownerdepCreateUser = form.ownerdepCreateUser ? form.ownerdepCreateUser : ''
        let ownercomProcessMember = form.ownercomProcessMember ? form.ownercomProcessMember : ''
        let processMember = form.processMember ? form.processMember : ''
        let ownerdepProcessMember = form.ownerdepProcessMember ? form.ownerdepProcessMember : ''
        let master = form.master ? form.master : ''

        // 通话特有的
        let disposalAgent = form.DISPOSAL_AGENT ? form.DISPOSAL_AGENT : ''

        // 在线咨询
        let user = form.user ? form.user : ''

        // 邮件
        let agent = form.agent ? form.agent : ''

        // return ownercom + owner + ownerdep + ownercomCreateUser + createUser + ownerdepCreateUser + master + disposalAgent + agent + user
        return ownercom + owner + ownerdep + ownercomCreateUser + createUser + ownerdepCreateUser+processMember+ownercomProcessMember+ownerdepProcessMember+master + disposalAgent + agent + user
     },
      formItemsLocaled () {
        var formItems = []

        if (this.adv && this.adv.advSearchOptions) {
          var localed = this.adv.advSearchOptions.localed

          var index = 0
          if (localed) {
            localed.forEach(item => {
              var newItem = deepClone(item)
              newItem._type = '_localed'
              newItem._index = index++
              formItems.push(newItem)
            })
          }
        }

        return formItems
      },
      dealedFormItemsLocaled () {
        var formItems = deepClone(this.formItemsLocaled)
        var formItemsConfig = this.editingFormItemsConfig || this.formItemsConfig

        formItems = formItems.filter(item => {
          var shown = true

          if (formItemsConfig && formItemsConfig[item.name]) {
            var config = formItemsConfig[item.name]
            shown = !config.hidden
          }

          return shown
        })

        formItems.sort((aItem, bItem) => {
          var aOrder
          var bOrder
          var config
          var itemName

          if (aItem.name && aItem.name.endsWith('_END')) {
            itemName = aItem.name.replace('_END', '_BEGIN')
            if (formItemsConfig && formItemsConfig[itemName]) {
              config = formItemsConfig[itemName]
              aOrder = config.order + 0.5
            }
          }

          if (bItem.name && bItem.name.endsWith('_END')) {
            itemName = bItem.name.replace('_END', '_BEGIN')
            if (formItemsConfig && formItemsConfig[itemName]) {
              config = formItemsConfig[itemName]
              bOrder = config.order + 0.5
            }
          }

          if (formItemsConfig && formItemsConfig[aItem.name]) {
            config = formItemsConfig[aItem.name]
            aOrder = config.order
          }

          if (formItemsConfig && formItemsConfig[bItem.name]) {
            config = formItemsConfig[bItem.name]
            bOrder = config.order
          }

          function isNum (n) {
            return !isNaN(n)
          }

          if (isNum(aOrder) && !isNum(bOrder)) {
            return -1
          }

          if (!isNum(aOrder) && isNum(bOrder)) {
            return 1
          }

          if (isNum(aOrder) && isNum(bOrder)) {
            return aOrder - bOrder
          }

          return aItem._index - bItem._index
        })

        return formItems
      }
    },
    filters: {
      sequence: function (value) {
        return value < 9 ? '0' + (value + 1) : (value + 1)
      }
    },
    mounted () {
      document.addEventListener('click', this.listenerFun)
    },
    beforeDestroy () {
      document.removeEventListener('click', this.listenerFun)
    },
    beforeMount () {
      // 工单模块发送2个depts请求优化
      this.$store.dispatch('getCache', {type: 'depts'}).then(() => {
        this.show = true
      })
      if (this.$store.state.iframeMessage.showBusinessCreateTime) {
        this.pickerOptions2.shortcuts.push({
          text: this.$t('webchat.threeYear'),
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setFullYear(start.getFullYear() - 3)
            picker.$emit('pick', [start, end])
            window._hmt && window._hmt.push(['_trackEvent', '其他统计', '工单查询-近三年'])
          }
        })
      }
      this.updateGuidanceSuccess()
    }
  }
</script>

<style lang="stylus">
.advanced-search-2
  .el-form-item__label
    display block !important
    padding-bottom 5px !important
    margin-bottom 0px !important
    padding-top 3px !important
    min-height 20px
  .el-form-item.current-item
    .el-form-item__label
      color #459AE9
  .el-radio
    margin-right 0
  .el-radio + .el-radio
    margin-left 10px

</style>

<style lang="stylus" scoped>
@import "../../../../assets/common.styl"

@media (max-width: 1440px)
  .popover
    width 860px !important
  .newBusinessSideBar .popover
    left -326px !important
    &:before
      top -6px
      left 332px
    &:after
      top -5px
      left 334px
  .newPublicSideBarSideBar .popover
    left -282px !important
    &:before
     top -6px
     left 288px
    &:after
     top -5px
     left 290px
.config-button
  border none
  background none
  position absolute
  right 15px
  top 10px
  cursor pointer
  width 20px
  height 20px
  line-height 20px
  z-index 10
  display block
  padding 0
.popover.dialogVisible
  z-index 2003
  .el-form-item
    z-index 16
.form-mark
  position absolute
  border-style solid
  top -1px
  left -1px
  right -1px
  bottom -1px
  background: #000
  opacity 0.15
  z-index 15
  border-radius 4px
  &:before
    content ""
    position absolute
    border-style solid
    top -8px
    left 252px
    border-width 0px 6px 6px 6px
    border-color #000 transparent

.mark
  position absolute
  top -22px
  bottom -4px
  left -4px
  right -4px
  z-index 100
  text-align center
  background rgba(0,0,0,0.03)
  border: dashed 1px #BFBFBF
  border-radius 2px
  line-height 50px
  color #fff
  font-size 26px
  text-shadow 0px 0px 1px #000
  cursor pointer
  &:before
    content ""
    position absolute
    border-style solid
    top -1px
    left -1px
    right -1px
    bottom -1px
    background: #ffffff
    opacity 0.15
    z-index 1
    border-radius 4px
  .sequence
    width 50px
    height 50px
    position absolute
    top calc(50% - 25px)
    left calc(50% - 25px)
    user-select none

.current-item
  .mark
    background rgba(69,154,233,0.15)
    border none

.moving
  .current-item
    .mark
      background rgba(69,154,233,0.2)

.footer-btn-group
  box-shadow 0px -1px 1px 0px rgba(0,0,0,0.1)
  width 100% !important

.el-form-item
  margin-bottom 0
  position relative
  padding 5px 10px
  min-height 51px
  z-index 0
.el-select
  width 100%
.el-checkbox-group
    display flex
    flex-wrap wrap
    margin-top -5px
    .el-checkbox
      margin-left 0
.default-form
  padding-bottom 10px
.fade-enter-active,
.fade-leave-active
  transition all 0.5s ease
.fade-enter,
.fade-leave-active
  opacity 0
.public-to
  color $cf-gray1
  font-size 12px
  margin-left 6px
.high
  position relative
  font-size 12px
  margin-right 10px
  .el-button
    color $c-main
.high-ranking-search
  padding 30px 0 10px 0
  font-size 0
.search-condition
  max-height calc(100vh - 300px)
  overflow auto
  overflow-x hidden
  margin-left 7px
  margin-right 7px
  padding-bottom 15px
  &::-webkit-scrollbar
    width 6px
    height 6px
.el-form--inline
  .el-form-item
    margin-right 0px
    width 190px
  .add-width
    width 400px
    position relative
  .add-width-linkage
    width 400px
    margin-right 10px
  .minus-width
    width 0px
    .el-form-item__content
      .el-date-editor
        height 30px
        width 384px
  .all-width
    width 100%
  .dotted
    width 100%
    border thin dashed $c-border1
    margin-bottom 15px
  .solid
    width 100%
    margin-top 15px
    border thin solid #e6e6e6
  .btn-group
    padding 13px 0 5px 0
    text-align center
  .el-form-item.cdr-call
    width 208px
    margin-right 5px
  .el-form-item.multi-label
    width 640px
    margin-right 0
.popover
  width 1070px
  z-index 100
  position absolute
  background $cf-white
  top 36px
  border 1px solid #ddd
  border-radius 4px
  line-height 30px
  box-shadow 0px 2px 4px 0px rgba(0, 0, 0, .12), 0px 0px 6px 0px rgba(0, 0, 0, .04)
  left -250px
  &:before
   content ""
   position absolute
   border-style solid
   top -6px
   left 255px
   border-width 0px 6px 6px 6px
   border-color #ddd transparent
  &:after
   content ""
   position absolute
   border-style solid
   top -4px
   left 257px
   border-width 0px 4px 4px 4px
   border-color  $cf-white transparent
  .el-button
    color $cf-white
  .rest-btn
    color rgb(31, 61, 58)
  .radioInputwidth
    display: inline-block
    width: 40%
    margin-left: 10px
.isNewView
  width 860px
</style>
